* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    height: 100%;
    background: url(../images/f1_1.jpg) no-repeat center 0/cover;
}

.cloud {
    position: relative;
}

.cloud img {
    position: absolute;
    left: 50%;
}

.cloud img:nth-child(1) {
    left: 650px;
    top: 10px;
    animation: move 1s linear infinite alternate;
}

.cloud img:nth-child(2) {
    left: 1010px;
    top: 50px;
    animation: move 1.1s linear infinite alternate;
}

.cloud img:nth-child(3) {
    left: 340px;
    top: 140px;
    animation: move 1.2s linear infinite alternate;
}

@keyframes move {
    to {
        transform: translate(20px);
    }
}

.text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: change 1s;
}

@keyframes change {
    0% {
        transform: translate(-50%, -50%) scale(1);
    }

    30% {
        transform: translate(-50%, -50%) scale(0.1);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.2);
    }

    70% {
        transform: translate(-50%, -50%) scale(0.6);
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
    }
}

.san {
    position: absolute;
    left: 435px;
    top: 55px;
    animation: move2 0.8s linear infinite alternate;
}

@keyframes move2 {
    to {
        transform: translateY(20px);
    }
}

.footer img {
    position: absolute;
}

.footer img:nth-child(1) {
    left: 330px;
    top: 500px;
    animation: move3 0.4s ease-in infinite alternate;
}

.footer img:nth-child(2) {
    left: 570px;
    top: 500px;
    animation: move3 0.4s ease-in infinite alternate 0.1s;
}

.footer img:nth-child(3) {
    left: 810px;
    top: 500px;
    animation: move3 0.4s ease-in infinite alternate 0.2s;
}

.footer img:nth-child(4) {
    left: 1050px;
    top: 500px;
    animation: move3 0.4s ease-in infinite alternate 0.3s;
}

@keyframes move3 {
    to {
        transform: translateY(40px);
    }
}